﻿<template>
  <div class="container" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label prop="code">
              <el-input v-model="queryBox.code" placeholder="客户编号">
                <template slot="prepend">客户编号</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div class="depart-box">
              <div class="slect-title">跟进人</div>
              <el-autocomplete
                v-model="userName"
                :fetch-suggestions="querySearchAsync2"
                placeholder="请输入内容"
                @select="handleSelect2"
                
              ></el-autocomplete>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="depart-box">
              <div class="slect-title">跟进时间</div>
              <el-date-picker
                v-model="trackingDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="get_subcentersearch"
        />
      </div>
    </div>
    <!--表格内容栏-->
    <Crm-table
      class="table-width"
      :showBatchDelete="false"
      CustomerFollowlogschool
      width="400"
      perms="true"
      :data="pageResult"
      :columns="columns"
      :loading="loading"
      @findPage="findPage"
      @handleFollow="handleFollow"
    ></Crm-table>
  </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import CustomerOwnership from "@/components/CustomerOwnership";
import { CodeToText } from "element-china-area-data";
import axios from "axios";
import Cookies from "js-cookie";
export default {
  name: "Student",
  components: {
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      userName: "",
      // 查询条件
      queryBox: {
        code: "",
        belongToId: "",
        trackingDateStart: "",
        trackingDateEnd: ""
      },
      trackingDateArr: [], //跟进时间数组
      student_data_from_options: [],
      student_type_options: [],
      student_progress_options: [],

      student_level_cache_options: [],
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "code", label: "客户编号", minWidth: 180 },
        { prop: "name", label: "学校名称", minWidth: 180 },
        { prop: "xueDuan", label: "学段", minWidth: 100 },
        { prop: "laiyuan", label: "客户来源", minWidth: 100 },
        { prop: "leixing", label: "客户类型", minWidth: 100 },
        { prop: "jinzhan", label: "客户进展", minWidth: 70 },
        { prop: "diqu", label: "地区", minWidth: 190 },
        { prop: "belongToName", label: "跟进人", minWidth: 190 },
        { prop: "createDate", label: "创建时间", minWidth: 140 },
        { prop: "trackingDate", label: "跟进时间", minWidth: 140 }
      ],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},

      operation: true, // true:新增, false:编辑
      selectionsLength: "",
      trackingDate: "",
      deptId: Cookies.get("threeLevelDeptId"),
      loading: false // 加载标识
    };
  },

  methods: {
    // 客户类型
    get_student_type() {
      this.student_type_options = JSON.parse(
        localStorage.getItem("schoolType")
      );
    },

    // 客户来源
    get_student_data_from() {
      this.student_data_from_options = JSON.parse(
        localStorage.getItem("schoolSource")
      );
    },

    // 客户进展
    get_student_progress() {
      this.student_progress_options = JSON.parse(
        localStorage.getItem("schoolProgress")
      );
    },

    // 学段
    get_level_cache() {
      this.student_level_cache_options = JSON.parse(
        localStorage.getItem("schoolSection")
      );
    },

    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }

      if (this.trackingDate.length > 0) {
        this.queryBox.trackingDateStart = this.trackingDate[0];
        this.queryBox.trackingDateEnd = this.trackingDate[1];
      }

      this.pageRequest = Object.assign({}, this.pageRequest, this.queryBox);

      // this.$api.school
      //   .schooltrackqueryTrackLogList(this.pageRequest)
      //   .then(res => {
      //     if (res.result == 1) {
      //       let content = { content: res.trackLists, totalSize: res.total };
      //       this.pageResult = content;
      //       this.pageResult.content.forEach(item => {
      //         //转换地区
      //         if (
      //           (item.province == null && item.city == null) ||
      //           (item.province == "null" && item.city == "null")
      //         ) {
      //           item.diqu = "";
      //         } else {
      //           item.diqu =
      //             CodeToText[item.province] +
      //             CodeToText[item.city] +
      //             CodeToText[item.area];
      //         }

      //         //转换来源
      //         this.student_data_from_options.forEach(type_item => {
      //           if (type_item.key == item.dataFrom) {
      //             item.laiyuan = type_item.value;
      //           }
      //         });
      //         //转换客户类型
      //         this.student_type_options.forEach(type_item => {
      //           if (type_item.key == item.type) {
      //             item.leixing = type_item.value;
      //           }
      //         });

      //         //转换客户进展
      //         this.student_progress_options.forEach(type_item => {
      //           if (type_item.key == item.progress) {
      //             item.jinzhan = type_item.value;
      //           }
      //         });

      //         // 转换学段
      //         if (item.schoolSection != "" && item.schoolSection != null) {
      //           let schoolSection = item.schoolSection.split(",");
      //           let sectionStr = "";
      //           schoolSection.forEach((schoolSection, index) => {
      //             this.student_level_cache_options.forEach(level_cache => {
      //               if (level_cache.key == schoolSection) {
      //                 sectionStr = sectionStr + level_cache.value + ",";
      //               }
      //             });
      //           });
      //           item.xueDuan = sectionStr.substring(
      //             0,
      //             sectionStr.lastIndexOf(",")
      //           );
      //         }
      //       });
      //     } else {
      //     }
      //     this.loading=false
      //   })
      //   .then(data != null ? data.callback : "");
    },

    //查询接口
    get_subcentersearch() {
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },

    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.EstablishTime = "";
      this.queryBox.FollowTime = "";
      this.userName = "";
      this.trackingDate = [];
      this.queryBox.code = "";
      this.queryBox.trackingPeople = "";
      this.queryBox.trackingDateStart = "";
      this.queryBox.trackingDateEnd = "";
      this.queryBox.belongToId = "";
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },

    // 查看客户档案
    handleFollow(params) {
      console.log(params);
      this.dataForm = Object.assign({}, params.row);
      this.$router.push({
        path: "/Follow/SchoolFollow",
        query: {
          id: this.dataForm.id,
          name: params.row.name
        }
      });
    },

    selectionChange: function(params) {
      let selectionsLength = params.selections.length;
      this.selectionsLength = selectionsLength;
      console.log(selectionsLength);
    },
    // 跟进人
    querySearchAsync2(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      this.$api.dropdown.users({ userType: 3 }).then(res => {
        for (let i of res.userInfoList) {
          i.value = i.realName; //将想要展示的数据作为value
        }
        restaurants = res.userInfoList;
        results = queryString
          ? restaurants.filter(this.createFilter2(queryString))
          : restaurants;
        callback(results);
      });
    },
    createFilter2(queryString) {
      return restaurant => {
        return (
          restaurant.realName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect2(item) {
      this.queryBox.belongToId = item.id;
    }
  },
  mounted() {
    this.get_student_type();
    this.get_student_data_from();
    this.get_student_progress();
    this.get_level_cache();
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>


